<template id='itemlist-tpl' class='container-fluid'>
  <div class='table-responsive col-sm-12'>
    <ul class='media-list row contacts-container'></ul>
    <table class='table table-bordered table-condensed table-striped' style='word-break:break-all'>
      <thead>
      <tr class='info'>
        <th>选择</th>
        <th>唯一标识</th>
        <th>负责人</th>
        <th>描述</th>
        <th>创建日期</th>
        <th>截止期</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for='item in items'>
        <td><input type='checkbox' v-model='item.selected'></td>
        <td width='18%'><a v-link="{path: '/details'}"> {{item.id}} </a></td>
        <td width='5%'>{{item.principal}}</td>
        <td width='48%'>{{item.description}}</td>
        <td width='8%'>{{item.creattime}}</td>
        <td width='8%'>{{item.deadline}}</td>
        <td v-if='item.state==0'>未完成</td>
        <td v-if='item.state==1'>执行中</td>
        <td v-if='item.state==8'>已完成</td>
        <td v-if='item.state==9'>已删除</td>
        <td>
          <a href='#' v-on:click='onRemoveItem(item)'> 删除 </a> |
          <a href='#' v-on:click='onEditItem(item)'> 编辑 </a>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<style>
</style>
<script>
  // import {getItems} from './getters'
  export default{
    mode: 'modeList',
    data: function () {
      return {
        items: [],
        url: 'http://euvee.vicp.co/rest/task/'
      }
    },
    props: ['method', 'item', 'curitems', 'delitems'],
    methods: {
      find: function () {
        this.$http.get(this.url).then(function (response) {
          this.items = response.data
          this.$dispatch('items', response.data)
        }, function (response) {
          if (response.status === 401) {
            window.alert('请登陆 ')
          } else {
            window.alert('Probably failed to connect the backend server! Pls check your server status! ')
          }
        })
      },
      remove: function (item) {
        this.$http.delete(this.url + item.id).then(function (response) {
          this.find()
        }, function (response) {
          if (response.status === 500) {
            window.alert('Probably failed to connect the backend server! Pls check your server status! ')
          }
        })
      },
      onEditItem: function (item) {
        this.$dispatch('item', item)
        this.$dispatch('component', 'modeEdit')
      },
      onRemoveItem: function (item) {
        var r = window.confirm('确定删除？')
        if (r === true) {
          this.remove(item)
        }
      }
    },
    ready: function () {
      this.find()
    },
    events: {
      'curitems': function () {
        this.find()
      },
      'deleteitems': function (item) {
        console.log('delete all in list')
        this.remove(item)
      },
      'removeitems': function (item) {
        console.log('remove all in list')
        this.remove(item)
      }
    }
  }
</script>
